import React from 'react';
import { AlertDialog, AlertDialogContent } from '@/components/ui/alert-dialog';
import { CloseCircleOutlined } from '@ant-design/icons';
import { pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
export const ViewResume: React.FC<{
  url: string;
  title: string;
  show: boolean;
  onChange: (show: boolean) => void;
}> = ({ url, title, show, onChange }) => {
  // const [extension, setExtension] = useState('');
  // const getExtension = (url: string) => {
  //   return url.split('.').pop();
  // };
  // useEffect(() => {
  //   if (url) {
  //     setExtension(getExtension(url) || '');
  //   }
  // }, [url]);
  return (
    <AlertDialog open={show} onOpenChange={onChange}>
      <AlertDialogContent className="">
        <div className="mt-1 flex justify-end">
          <CloseCircleOutlined
            style={{ fontSize: '20px' }}
            onClick={() => onChange(false)}
          />
        </div>
        <iframe
          src={
            url.endsWith('.pdf')
              ? `https://view.xdocin.com/view?src=${url}`
              : `https://view.officeapps.live.com/op/embed.aspx?src=${url}`
          }
          // src={`https://view.officeapps.live.com/op/embed.aspx?src=${url}`}
          width="100%"
          height="650px"
          title={title}
        />
      </AlertDialogContent>
    </AlertDialog>
  );
};
